<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字滑动</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 100%;
        height: 100dvh;
        padding-top: 200px;
        padding-left: 45%;
        box-sizing: border-box;
        overflow: hidden;
        background: linear-gradient(270deg, #e55643, #5beb67, #3527f3);
      }
      .title {
        font-size: 42px;
        text-transform: uppercase;
        letter-spacing: 5px;
        transform: rotate(-10deg);
        display: flex;
      }
      .title span {
        opacity: 0;
        text-shadow: 1px 1px #533d4a, 2px 2px #533d4a, 3px 3px #533d4a,
          4px 4px #533d4a, 5px 5px #533d4a;

        transform: skew(-10deg);
        animation: move 1s cubic-bezier(0.58, 0.11, 0.63, 1.62) forwards
          var(--delay);
      }

      @keyframes move {
        from {
          opacity: 0;
          transform: skew(-10deg) translateY(300%);
        }
        to {
          opacity: 1;
          transform: skew(-10deg) translateY(0);
        }
      }

      .title:nth-child(1) {
        color: #e55643;
      }
      .title:nth-child(2) {
        color: #5beb67;
      }
      .title:nth-child(3) {
        color: #3527f3;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="title">这是一个</p>
      <p class="title">好玩的</p>
      <p class="title">动画功能</p>
    </div>
    <script>
      const ps = document.querySelectorAll('.title')
      ps.forEach((p) => {
        const res = p.textContent
          .split('')
          .map((c) => `<span>${c}</span>`)
          .join('')
        p.innerHTML = res
      })

      const spans = document.querySelectorAll('.title span')
      for (let i = 0; i < spans.length; i++) {
        spans[i].style.setProperty('--delay', `${i * 0.1}s`)
      }
    </script>
  </body>
</html>
